<template>
  <van-row>
    <van-col span="12">游戏信息</van-col>
    <van-col span="12" style="text-align: right">
      <van-button @click="$router.push('/info')" type="success"
        >返回</van-button
      >
    </van-col>
  </van-row>
  <van-cell-group>
    <van-cell :value="game.description">
      <template #title>
        <span class="custom-title">游戏说明</span>
        <van-tag type="success">{{ game.gameType }}</van-tag>
        <van-tag type="warning">{{ game.playType }}</van-tag>
      </template>
    </van-cell>
    <van-cell title="游戏条件" :value="game.gameCondition" />
    <van-cell title="状态" :value="game.statusName" />
  </van-cell-group>
  <van-cell title="玩家">
    <template #value>
      <span
        style="margin-right: 15px"
        v-for="p in game.players"
        :key="p.playerId"
        >{{ p.playerName }}
        <van-tag :type="getTagTypeByPlayerStatus(p.playerStatus)">{{
          p.playerStatus
        }}</van-tag></span
      >
    </template>
  </van-cell>

  <van-cell title="游戏记录" />

  <van-row
    v-for="(r, index) in game.records"
    :key="r"
    :class="index % 2 == 0 ? 'on' : 'off'"
  >
    <van-col span="4" style="text-align: center">{{ index + 1 }}</van-col>
    <van-col span="6">{{ r.playerName }}</van-col>
    <van-col span="8">{{ r.answer }}</van-col>
    <van-col span="6">{{ r.isProperAnswer ? "正确" : "错误" }}</van-col>
  </van-row>
</template>
<script>
import { usePlayStore } from "@/stores/playstore";
import { inject } from "vue";

export default {
  data() {
    return {
      game: {
        id: "",
        creator: "",
        currentPlayer: "",
        description: "",
        gameType: "",
        playType: "",
        gameContext: "",
        records: [],
        players: [],
        activatePlayers: [],
        status: "",
        statusName: "",
      },
    };
  },
  created() {
    var me = this;
    const store = usePlayStore();
    var apiroot = import.meta.env.VITE_ROOTAPIURL + "api/Game/";
    var getplayerapi = apiroot + "GetGame?gameid=" + store.gameid;
    const axios = inject("axios");
    axios({
      url: getplayerapi,
      method: "get",
      headers: {
        Authorization: "Bearer " + store.User.access_token,
      },
    })
      .then(function (response) {
        me.game = response.data;
      })
      .catch(function (error) {
        console.log(error);
      });
  },
  methods: {
    getTagTypeByPlayerStatus(status) {
      if (status == "出局") return "danger";
      if (status == "等待") return "primary";
      return "success";
    },
  },
};
</script>
<style scoped>
.on {
  background: #eeeeee;
  padding-top: 15px;
  padding-bottom: 15px;
  font-size: 3.5mm;
}

.off {
  padding: 4px;
  font-size: 3.5mm;
  padding-top: 15px;
  padding-bottom: 15px;
  border-top: 1px solid #aaaaaa;
}
</style>
